<template>
<div style="width:1100px;height: 560px;">
  <el-row :gutter="20">
    <el-col :span="10" :offset="14">
      <el-row>
        <el-input
            placeholder="请输入id"
            v-model="input"
            style="width: 250px;padding: 20px;"
            clearable>
        </el-input>
        <el-button @click="getMark(input)" type="primary" icon="el-icon-search">搜索</el-button>
      </el-row>
    </el-col>
  </el-row>

  <el-tabs style="position: relative;width: 89%;top:-50px;left:80px" v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first" >
      <el-table
          height="490"
          :data="markList"
          border
          stripe
          style="">
        <el-table-column
            prop="id"
            label="编号"
            width="60">

        </el-table-column>
        <el-table-column
            prop="lng"
            label="经度"
            width="170">
        </el-table-column>

        <el-table-column
            prop="lat"
            width="170"
            label="纬度">
        </el-table-column>
        <el-table-column
            prop="createTime"
            width="250"
            label="提交时间">
        </el-table-column>
        <el-table-column
            prop="image"
            width="130"
            label="照片">
          <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              @click="push(scope.row.image)"
              :src="scope.row.image"
              :preview-src-list="srcList"
              :fit="fill"></el-image>
          </template>
        </el-table-column>


        <el-table-column
            prop="status"
            width="80"
            label="状态">
          <template slot-scope="scope">
            <label v-if="scope.row.status===1" style="color:#6dab5e ">已通过</label>
            <label v-if="scope.row.status===0" style="color:#396aa6 ">未审核</label>
            <label v-if="scope.row.status===2" style="color:rgba(2,1,1,0.85) ">未通过</label>
          </template>
        </el-table-column>
        <el-table-column
            width="118"

            label="操作">
          <template slot-scope="scope">
            <el-row>
              <i class="el-icon-circle-check" v-if="scope.row.status===0" @click="check(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-circle-close" v-if="scope.row.status===0" @click="unCheck(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-delete" @click="delete(scope.row)"
                 style="padding: 5px"></i>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>

    <el-tab-pane label="未审核" name="second">
      <el-table
          height="490"
          :data="markList0"
          border
          stripe
          style="">
        <el-table-column
            prop="id"
            label="编号"
            width="60">

        </el-table-column>
        <el-table-column
            prop="lng"
            label="经度"
            width="170">
        </el-table-column>

        <el-table-column
            prop="lat"
            width="170"
            label="纬度">
        </el-table-column>
        <el-table-column
            prop="createTime"
            width="250"
            label="提交时间">
        </el-table-column>
        <el-table-column
            prop="image"
            width="130"
            label="照片">
          <template slot-scope="scope">
            <el-image
                style="width: 100px; height: 100px"
                @click="push(scope.row.image)"
                :src="scope.row.image"
                :preview-src-list="srcList"
                :fit="fill"></el-image>
          </template>
        </el-table-column>


        <el-table-column
            prop="status"
            width="80"
            label="状态">
          <template slot-scope="scope">
            <label v-if="scope.row.status===1" style="color:#6dab5e ">已通过</label>
            <label v-if="scope.row.status===0" style="color:#396aa6 ">未审核</label>
            <label v-if="scope.row.status===2" style="color:rgba(2,1,1,0.85) ">未通过</label>
          </template>
        </el-table-column>
        <el-table-column
            width="118"

            label="操作">
          <template slot-scope="scope">
            <el-row>
              <i class="el-icon-circle-check" v-if="scope.row.status===0" @click="check(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-circle-close" v-if="scope.row.status===0" @click="unCheck(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-delete" @click="delete(scope.row)"
                 style="padding: 5px"></i>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>
    <el-tab-pane label="已通过" name="third" >
      <el-table
          height="490"
          :data="markList1"
          border
          stripe
          style="">
        <el-table-column
            prop="id"
            label="编号"
            width="60">

        </el-table-column>
        <el-table-column
            prop="lng"
            label="经度"
            width="170">
        </el-table-column>

        <el-table-column
            prop="lat"
            width="170"
            label="纬度">
        </el-table-column>
        <el-table-column
            prop="createTime"
            width="250"
            label="提交时间">
        </el-table-column>
        <el-table-column
            prop="image"
            width="130"
            label="照片">
          <template slot-scope="scope">
            <el-image
                style="width: 100px; height: 100px"
                @click="push(scope.row.image)"
                :src="scope.row.image"
                :preview-src-list="srcList"
                :fit="fill"></el-image>
          </template>
        </el-table-column>


        <el-table-column
            prop="status"
            width="80"
            label="状态">
          <template slot-scope="scope">
            <label v-if="scope.row.status===1" style="color:#6dab5e ">已通过</label>
            <label v-if="scope.row.status===0" style="color:#396aa6 ">未审核</label>
            <label v-if="scope.row.status===2" style="color:rgba(2,1,1,0.85) ">未通过</label>
          </template>
        </el-table-column>
        <el-table-column
            width="118"

            label="操作">
          <template slot-scope="scope">
            <el-row>
              <i class="el-icon-circle-check" v-if="scope.row.status===0" @click="check(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-circle-close" v-if="scope.row.status===0" @click="unCheck(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-delete" @click="delete(scope.row)"
                 style="padding: 5px"></i>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>
    <el-tab-pane label="未通过" name="forth" >
      <el-table
          height="490"
          :data="markList2"
          border
          stripe
          style="">
        <el-table-column
            prop="id"
            label="编号"
            width="60">

        </el-table-column>
        <el-table-column
            prop="lng"
            label="经度"
            width="170">
        </el-table-column>

        <el-table-column
            prop="lat"
            width="170"
            label="纬度">
        </el-table-column>
        <el-table-column
            prop="createTime"
            width="250"
            label="提交时间">
        </el-table-column>
        <el-table-column
            prop="image"
            width="130"
            label="照片">
          <template slot-scope="scope">
            <el-image
                style="width: 100px; height: 100px"
                @click="push(scope.row.image)"
                :src="scope.row.image"
                :preview-src-list="srcList"
                :fit="fill"></el-image>
          </template>
        </el-table-column>


        <el-table-column
            prop="status"
            width="80"
            label="状态">
          <template slot-scope="scope">
            <label v-if="scope.row.status===1" style="color:#6dab5e ">已通过</label>
            <label v-if="scope.row.status===0" style="color:#396aa6 ">未审核</label>
            <label v-if="scope.row.status===2" style="color:rgba(2,1,1,0.85) ">未通过</label>
          </template>
        </el-table-column>
        <el-table-column
            width="118"

            label="操作">
          <template slot-scope="scope">
            <el-row>
              <i class="el-icon-circle-check" v-if="scope.row.status===0" @click="check(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-circle-close" v-if="scope.row.status===0" @click="unCheck(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-delete" @click="delete(scope.row)"
                 style="padding: 5px"></i>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
import {getAllMap,getMarkByStatus,changeMarkStatus,addMark} from "@/api/api";

export default {

  name: "mark",
  data() {
    return {
      activeName: 'first',
      input: '',
      markList: [],
      markList0: [],
      markList1: [],
      markList2: [],
      srcList: [],
    }
  },
  mounted() {
    this.getAll();
  },
  methods: {
    unCheck(i){
      let data = {'status':'2'}

      changeMarkStatus(i.id,data).then((res) => {
        if (res.data.code === '200') {

          console.log(res.data.data);
          alert("标点未通过")

          location.reload()
        }else{ console.log(res.data.message)
          console.log(res.data.data);}
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })
    },
    check(i){

      let data = {'status':'1'}
changeMarkStatus(i.id,data).then((res) => {
  if (res.data.code === '200') {
    alert("标点已通过")
    location.reload()
  }else{ console.log(res.data.message)
    console.log(res.data.data);}
}).catch((res) => {

  console.log(res.data.data);
})
      location.reload()
    },
    push(i){
      this.srcList.push(i);
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    getAll() {
      getAllMap().then((res) => {
        if (res.data.code === '200') {
          this.markList = res.data.data;
        }else{ console.log(res.data.message)
          console.log(res.data.data);}
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })
      getMarkByStatus(0).then((res) => {
        if (res.data.code === '200') {
          this.markList0 = res.data.data;
        }else{ console.log(res.data.message)
          console.log(res.data.data);}
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })

      getMarkByStatus(1).then((res) => {
        if (res.data.code === '200') {
          this.markList1 = res.data.data;
        }else{ console.log(res.data.message)
          console.log(res.data.data);}
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })

      getMarkByStatus(2).then((res) => {
        if (res.data.code === '200') {
          this.markList2 = res.data.data;
        }else{ console.log(res.data.message)
          console.log(res.data.data);}
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })
    },
  }
}
</script>

<style scoped>

</style>